<script setup>
import {ref, onMounted, computed} from 'vue'
import { sessionApi, pageLogApi, treeModApi, selUserApi } from '@/common/api'
import router from '@/common/router'
import Pager from '@/components/pagination/UbtPager.vue'
import UbtTreeSel from '@/components/cascader/UbtTreeSel.vue'
import UbtSelect from '@/components/select/UbtSelect.vue'
import { formatDate, formatDateRange } from '@/common/filter'
import Datepicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'

// 自动加载，判断权限
onMounted(() => {
  checkAuth()
})

// checkAuth 获取权限
const checkAuth = async () => {
  const res = await sessionApi()
  if (res.code === 200) {
    list(0, 1)
    selMod()
    selUser()
  } else {
    Msg({ kind: 'error', txt: res.msg })
    router.replace('/login')
  }
}

const dates = ref([])
const schObj = {
  userId: '',
  nickName: '',
  usname: '',
  modId: '',
  modName: '',
  modCode: '',
  kind: 0,
  kindName: '',
  kindCode: '',
  beginDate: 0,
  endDate: 0,
  offset: 0,
  limit: 20
}
const schRef = ref(schObj)
const total = ref(0)
const curPage = ref(1)
const logList = ref([])
const hasData = ref(false)
// list 列表展示
const list = async (offset, cur) => {
  schRef.value.offset = offset || 0
  curPage.value = cur || 1
  hasData.value = false
  schRef.value.beginDate = dates.value && dates.value.length===2 ? dates.value[0].getTime()/1000 : 0
  schRef.value.endDate = dates.value && dates.value.length===2 ? dates.value[1].getTime()/1000 : 0
  const res = await pageLogApi(schRef.value)
  if(res.code === 200 && res.data) {
    hasData.value = true
    total.value = res.data.total
    logList.value = res.data.list
  }
}

// search 显示隐藏筛选
const schShow = ref(false)
const search = () => {
  schShow.value = !schShow.value
}

// clrSch 重置搜索框
const clrSch = () => {
  schRef.value = {
    userId: '',
    nickName: '',
    usname: '',
    modId: '',
    modName: '',
    modCode: '',
    kind: 0,
    kindName: '',
    kindCode: '',
    beginDate: 0,
    endDate: 0,
    offset: 0,
    limit: 20
  }
  list(0, 1)
  dates.value = null
}

// selMod 获取模块下拉列表
const modList = ref([])
const selMod = async () => {
  const res = await treeModApi()
  if(res.code === 200) {
    modList.value = res.data
  }
}

// selUser 获取用户下拉列表
const userList = ref([])
const selUser = async (schName) => {
  const res = await selUserApi({ schName: schName, deptId: '' })
  if(res.code === 200) {
    userList.value = res.data
  }
}

const selByKey = (schName) => {
  selUser(schName)
}

const setValue = (item, kind) => {
  switch(kind) {
    case 1:
      schRef.value.modId = item.selId
      schRef.value.modName = item.selName
      schRef.value.modCode = item.selCode
      break
    case 2:
      schRef.value.userId = item.selId
      schRef.value.nickName = item.selName
      schRef.value.usname = item.selCode
      break
    case 3:
      schRef.value.kind = item.selId
      schRef.value.kindName = item.selName
      schRef.value.kindCode = item.selCode
      break
  }
}

// fmtDate 时间戳转时间
const fmtDate = computed(() => {
  return (time, kind) => {
    let date = new Date(time*1000)
    return formatDate(date, kind)
  }
})

const kindList = ref([
  {selId: 1, selName: '新增', selCode: '101', chhed: false},
  {selId: 2, selName: '删除', selCode: '102', chhed: false},
  {selId: 3, selName: '修改', selCode: '103', chhed: false},
  {selId: 4, selName: '上架', selCode: '104', chhed: false},
  {selId: 5, selName: '下架', selCode: '105', chhed: false},
  {selId: 6, selName: '登录', selCode: '106', chhed: false}
])

// fmtKind 状态转码
const fmtKind = computed(() => {
  return (kind) => {
    let str = ''
    switch (kind) {
      case 1:
        str = '新增'
        break;
      case 2:
        str = '删除'
        break;
      case 3:
        str = '修改'
        break;
      case 4:
        str = '上架'
        break;
      case 5:
        str = '下架'
        break;
      case 6:
        str = '登录'
        break;
      default:
        str = '其它'-kind
        break
    }
    return str
  }
})
</script>

<template>
  <div class="a">
    <!-- 头部消息 -->
    <div class="b">
      <div class="btn-r" title="筛选" @click="search()"><i class="iconfont search"></i></div>
      <div class="btn-r" title="刷新" @click="list(0, 1)"><i class="iconfont arrow__circlepath"></i></div>
    </div>
    <!-- 中部数据 -->
    <div class="c" v-if="schShow">
      <div class="d"><ubt-tree-sel :tree-list="modList" :kind="1" :inboxed="true" :curName="schRef.modName!=='' ? schRef.modName+'['+schRef.modCode+']' : ''" pre-name="模块" @setValue="setValue" /></div>
      <div class="d"><ubt-select :kind="2" :sel-list="userList" :inboxed="true" :curName="schRef.nickName!=='' ? schRef.nickName+'['+schRef.usname+']' : ''" pre-name="用户" @setValue="setValue" @selByKey="selByKey" /></div>
      <div class="d"><ubt-select :kind="3" :sel-list="kindList" :inboxed="true" :curName="schRef.kindName!=='' ? schRef.kindName+'['+schRef.kindCode+']' : ''" pre-name="操作" @setValue="setValue" /></div>
      <div class="d"><Datepicker v-model="dates" range locale="zh-CN" :format="formatDateRange" style="width: 250px;" placeholder="请选择起止时间"></Datepicker></div>
      <div class="btn-p" @click="list(0, 1)"><i class="iconfont search"></i> 筛选</div>
      <div class="btn-d" @click="clrSch()"><i class="iconfont arrowshape_turn_up_left"></i> 重置</div>
    </div>
    <div class="f" v-if="hasData">
      <table>
        <tr>
          <th style="width: 35%;">用户</th>
          <th style="width: 25%;">模块</th>
          <th style="width: 15%;">操作</th>
          <th style="width: 25%;">时间</th>
        </tr>
        <tr v-for="curLog in logList" :key="curLog.logId" class="tr-style">
          <td class="txt-center">{{curLog.logUser}}</td>
          <td class="txt-center">{{curLog.modName}}</td>
          <td class="txt-center">{{fmtKind(curLog.kind)}}</td>
          <td class="txt-center">{{fmtDate(curLog.addTime, 2)}}</td>
        </tr>
      </table>
      <Pager v-if="hasData" :limit="schRef.limit" :total="total" :page="curPage" @turn="list" />
    </div>
    <div v-else class="no-data">暂无内容</div>
  </div>
</template>

<style scoped>
.a {width: 100%; height: 100%;}
.b {padding: 10px 20px; display: flex; display: -webkit-flex;}
.c {margin: 0 10px 10px 10px; border: 1px solid #CCC; display: flex; display: -webkit-flex; flex-wrap: wrap;  padding: 15px; justify-content: end;}
.d {flex-grow: 1; margin-bottom: 15px;}
.e {width: 230px; padding: 8px;}
.f {background-color: #FFF;}
</style>
